<template>
	<view>
		<view :class="{ safeBottom: orderInfo.orderStatus < 4 }">
			<view class="bg"></view>

			<view class="orderRemindBox">
				<view class="orderStatusWrapper">
					<view>
						<text
							v-if="(orderInfo.orderStatus > 4 && orderInfo.orderStatus < 9) || orderInfo.orderStatus == 11">结算中</text>
						<text v-else>{{ orderInfo.orderStatus | orderStatus }}</text>
						<text style="margin-left: 20rpx; font-size: 28rpx;"
							v-if="orderInfo.orderStatus === 0 && orderInfo.rentPayType === 1">
							¥{{ orderInfo.amount }}
						</text>
					</view>

					<!-- 已取消|已完成(更新时间) -->
					<text v-if="orderInfo.orderStatus === 9 || orderInfo.orderStatus === 10" style="font-size: 28rpx;">
						{{ orderInfo.updateTime || '' }}
					</text>
					<!-- 待取车(预约取车时间) -->
					<text v-else-if="orderInfo.orderStatus === 3"
						style="font-size: 28rpx;">{{ orderInfo.taskInfo }}前取车</text>
					<!-- 用车中(预约还车时间) -->
					<text v-else-if="orderInfo.orderStatus === 4"
						style="font-size: 28rpx;">{{ orderInfo.alsoInfo }}前还车</text>
					<!-- 结算中 -->
					<text
						v-else-if="(orderInfo.orderStatus > 4 && orderInfo.orderStatus < 9) || orderInfo.orderStatus == 11"
						style="font-size: 28rpx;">
						{{ orderInfo.orderStatus | orderStatus }}
					</text>
				</view>

				<view v-if="orderInfo.orderStatus === 0 && orderInfo.rentPayType === 1 && orderInfo.orderSource === 1"
					style="display: inline;font-size: 24rpx;color: #fff;">
					<text style="margin-right: 10rpx;">剩余支付时间</text>
					<u-count-down :time="downTime * 1000" format="HH时mm分ss秒" @finish="countDownFinish"></u-count-down>
				</view>

				<view v-if="orderInfo.orderStatus === 0 || orderInfo.orderStatus === 10"
					style="margin-top: 20rpx; font-size: 24rpx;">
					<text v-if="orderInfo.orderStatus === 0">未支付情况下，可能会因为价格/库存变动导致您下单失败，请尽快完成支付</text>
					<text v-else-if="showCancleBtn">您已取消订单，如有需要可重新下单</text>
				</view>
				<!-- 已取消显示 -->
				<view v-if="orderInfo.orderStatus === 10 && showCancleBtn" class="re-order" @click.stop="goAginOrder">
					重新下单</view>
			</view>
			<!-- 费用明细 -->
			<view class="orderInfoBox">
				<view class="boxTitle" style="color: #1989FA;border: none;">
					费用明细
					<!-- <text v-if="orderInfo.orderStatus>=5 && orderInfo.orderStatus<=9" class="depositDetail"
		   			@click.stop="goDepositRefund">查看押金退款明细</text> -->
				</view>
				<!-- 订单费用 -->
				<view class="costInfoBox">
					<!-- 标题 -->
					<view class="costTitle flex-row-center-sb" @click="showOrderCost = !showOrderCost">
						<text>{{ orderInfo.orderInfoRent.name }}</text>
						<view class="flex-row-center">
							<text style="color: #FF2020;margin-right: 5rpx;">¥{{ orderInfo.orderInfoRent.cost }}</text>
							<text style="color: #FF2020;margin-right: 5rpx;"
								v-if="orderInfo.orderInfoRent.paidAmount > 0">
								(已支付{{ orderInfo.orderInfoRent.paidAmount }}元)
							</text>
							<u-icon v-if="showOrderCost" name="arrow-up" color="#999" size="12"></u-icon>
							<u-icon v-else name="arrow-down" color="#999" size="12"></u-icon>
						</view>
					</view>
					<view class="costList" v-if="
							orderInfo.orderInfoRent.itemsVoList != null && orderInfo.orderInfoRent.itemsVoList.length > 0 && showOrderCost
						">
						<view class="costItem" v-for="(item, index) in orderInfo.orderInfoRent.itemsVoList" :key="index"
							@click="clickItem(item)">
							<view class="flex-row-center-sb">
								<!-- 普通费用 -->
								<block v-if="item.type == 1 || item.type == 7">
									<view class="flex-row-center">
										<text class="chargeProjectName">{{ item.name }}</text>
										<image v-if="item.remark" style="width: 30rpx;height: 30rpx;"
											src="/pagesD/static/car_helper.png" mode="aspectFill"
											@click.stop="handleHelper(item)"></image>
									</view>
									<!-- 有子费用项-->
									<view v-if="item.itemsVoList != null && item.itemsVoList.length > 0">
										<text>¥{{ item.cost }}</text>
										<u-icon name="arrow-down" color="#999" size="12"></u-icon>
									</view>
									<!-- 无子费用项 -->
									<view v-else>
										<text v-if="item.calculate && item.isRent != 1"
											style="color: #999;margin-right: 10rpx;font-size: 20rpx;">
											{{ item.calculate }}
										</text>
										<text>¥{{ item.cost }}</text>
										<text v-if="item.isRent == 1"
											style="color: #1989FA;margin-left: 20rpx;font-size: 24rpx;"
											@click="showPriceCalendar = true">
											明细
										</text>
									</view>
								</block>
								<!-- 优惠费用 -->
								<block v-else-if="item.type == 2">
									<text style="color: #FF2020;">{{ item.name }}</text>
									<text style="color: #FF2020;">-¥{{ item.cost }}</text>
								</block>
								<!-- 有实付费用 -->
								<block v-else-if="item.type == 3">
									<view class="flex-row-center">
										<text class="chargeProjectName">{{ item.name }}</text>
										<image v-if="item.remark" style="width: 30rpx;height: 30rpx;"
											src="/pagesD/static/car_helper.png" mode="aspectFill"
											@click.stop="handleHelper(item)"></image>
									</view>
									<view class="flex-row-center"
										v-if="item.itemsVoList != null && item.itemsVoList.length > 0">
										<text v-if="item.calculate && item.isRent != 1"
											style="color: #999;margin-right: 10rpx;font-size: 20rpx;">
											{{ item.calculate }}
										</text>
										<text>¥{{ item.cost }}(实付{{ item.paidAmount }}元)</text>
										<u-icon v-if="item.open" name="arrow-up" color="#999" size="12"></u-icon>
										<u-icon v-else name="arrow-down" color="#999" size="12"></u-icon>
									</view>
								</block>
								<!-- 违约扣款费用 -->
								<block v-else-if="item.type == 6">
									<text>{{ item.name }}</text>
									<text>¥{{ item.cost }}</text>
								</block>
							</view>
							<!-- 子list -->
							<view v-if="item.itemsVoList != null && item.itemsVoList.length > 0 && item.isOpen"
								class="costSubList">
								<view class="costSubItem " v-for="(item1, index) in item.itemsVoList" :key="index">
									<view class="flex-row-center-sb">
										<text>{{ item1.name }}</text>
										<text>¥{{ item1.cost }}</text>
										<text v-if="item1.isRent == 1"
											style="color: #1989FA;margin-left: 20rpx;font-size: 24rpx;"
											@click="showPriceCalendar = true">
											明细
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 有退款显示 -->
				<view class="costTipBox" v-if="orderInfo.liquidatedDamages">
					<view class="titleInfo">
						<text>
							{{ orderInfo.liquidatedDamages.payTime || '' }}原路退回租金{{ orderInfo.liquidatedDamages.residualRent }}元
						</text>
					</view>
					<view class="valueInfo" v-if="orderInfo.liquidatedDamages.ruleText">
						{{ orderInfo.liquidatedDamages.ruleText }}，如有疑问请与门店联系
					</view>
				</view>

				<!-- 车辆押金 -->
				<view class="costInfoBox">
					<!-- 标题 -->
					<view class="costTitle flex-row-center-sb" @click="showCarDeposit = !showCarDeposit">
						<text>{{ orderInfo.orderInfoDeposit.name }}</text>
						<view class="flex-row-center">
							<text
								style="color: #FF2020;margin-right: 5rpx;">¥{{ orderInfo.orderInfoDeposit.cost }}</text>
							<text style="color: #FF2020;margin-right: 5rpx;"
								v-if="orderInfo.orderInfoDeposit.paidAmount > 0">
								(已支付{{ orderInfo.orderInfoDeposit.paidAmount }}元)
							</text>
							<block
								v-if="orderInfo.orderInfoDeposit.itemsVoList != null && orderInfo.orderInfoDeposit.itemsVoList.length > 0">
								<u-icon v-if="showCarDeposit" name="arrow-up" color="#999" size="12"></u-icon>
								<u-icon v-else name="arrow-down" color="#999" size="12"></u-icon>
							</block>
						</view>
					</view>
					<view class="depositTipRed" v-if="orderInfo.depositRemark">{{ orderInfo.depositRemark }}</view>
					<view v-if="
							showCarDeposit &&
								orderInfo.orderInfoDeposit.itemsVoList != null &&
								orderInfo.orderInfoDeposit.itemsVoList.length > 0
						" style="border-top: 1rpx solid #f5f5f5;padding-bottom: 24rpx;">
						<view class="costSubList">
							<view class="costSubItem" v-for="(item, index) in orderInfo.orderInfoDeposit.itemsVoList"
								:key="index">
								<view class="flex-row-center-sb">
									<text>{{ item.name }}</text>
									<text>-¥{{ item.cost }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 违章押金 -->
				<view class="costInfoBox">
					<!-- 标题 -->
					<view class="costTitle flex-row-center-sb" @click="showIllegalDeposit = !showIllegalDeposit">
						<text>{{ orderInfo.orderInfoIllegal.name }}</text>
						<view class="flex-row-center">
							<text
								style="color: #FF2020;margin-right: 5rpx;">¥{{ orderInfo.orderInfoIllegal.cost }}</text>
							<text style="color: #FF2020;margin-right: 5rpx;"
								v-if="orderInfo.orderInfoIllegal.paidAmount > 0">
								(已支付{{ orderInfo.orderInfoIllegal.paidAmount }}元)
							</text>
							<block
								v-if="orderInfo.orderInfoIllegal.itemsVoList != null && orderInfo.orderInfoIllegal.itemsVoList.length > 0">
								<u-icon v-if="showIllegalDeposit" name="arrow-up" color="#999" size="12"></u-icon>
								<u-icon v-else name="arrow-down" color="#999" size="12"></u-icon>
							</block>
						</view>
					</view>
					<view class="depositTipRed" v-if="orderInfo.illegalRemark">{{ orderInfo.illegalRemark }}</view>
					<view v-if="
							showIllegalDeposit &&
								orderInfo.orderInfoIllegal.itemsVoList != null &&
								orderInfo.orderInfoIllegal.itemsVoList.length > 0
						" style="border-top: 1rpx solid #f5f5f5;padding-bottom: 24rpx;">
						<view class="costSubList">
							<view class="costSubItem" v-for="(item, index) in orderInfo.orderInfoIllegal.itemsVoList"
								:key="index">
								<view class="flex-row-center-sb">
									<text>{{ item.name }}</text>
									<text>-¥{{ item.cost }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部提示 -->
				<view class="depositTip">车辆押金到店支付/信用免押，若已支付，请与门店联系线下退款/解冻</view>
			</view>

			<!-- 车型门店 -->
			<view class="carStoreInfo">
				<!-- 车型 -->
				<view class="carBox">
					<view class="carInfo">
						<view class="carModel">{{ orderInfo.modelName }}</view>
						<view class="carConfig">
							<text
								v-if="orderInfo.operatingClassification">{{ orderInfo.operatingClassification }}</text>
							<text v-if="orderInfo.speedChangingBox">{{ ' | ' + orderInfo.speedChangingBox }}</text>
							<text v-if="orderInfo.displacement">{{ ' | ' + orderInfo.displacement }}</text>
							<text v-if="orderInfo.fuelType">{{ ' | ' + orderInfo.fuelType }}</text>
						</view>
					</view>
					<image class="carImg" :src="orderInfo.url | mmvImageUrl" mode="aspectFill"></image>
				</view>

				<u-line color="#F0F2F4" margin="38rpx 0"></u-line>

				<view class="storeBox">
					<view class="takeReturnCarInfo">
						<view class="takeWay">
							<text class="wayTitle">取还方式</text>
							<text class="wayValue">{{ orderInfo.rentalType | rentalType }}</text>
						</view>
						<view class="flex-row-center" style="margin-top: 16rpx">
							<view class="mark1">取</view>
							<text class="value" style="margin-left: 16rpx">{{ orderInfo.taskInfo }}</text>
						</view>
						<view class="addressBox" style="margin-top: 8rpx" @click.stop="goNaviRoute(1)">
							<text class="value">{{ orderInfo.takeStoreName }}</text>
							<view class="flex-row-center">
								<image class="navi" src="/static/common/map_navi.png" mode="aspectFill"></image>
								<text>地图导航</text>
							</view>
						</view>
					</view>

					<view class="dashedLine">
						<u-line direction="col" dashed color="#CCD4DB" length="60rpx"></u-line>
					</view>

					<view class="takeReturnCarInfo" style="margin-top: 36rpx">
						<view class="flex-row-center">
							<view class="mark2">还</view>
							<text class="value" style="margin-left: 16rpx">{{ orderInfo.alsoInfo }}</text>
						</view>
						<view class="addressBox" style="margin-top: 8rpx" @click.stop="goNaviRoute(2)">
							<text class="value">{{ orderInfo.alsoStoreName }}</text>
							<view class="flex-row-center">
								<image class="navi" src="/static/common/map_navi.png" mode="aspectFill"></image>
								<text style="margin-left: 5rpx;">地图导航</text>
							</view>
						</view>
					</view>

					<view class="storeInfo">
						<view
							v-if="(orderInfo.orderStatus >= 4 && orderInfo.orderStatus <= 9) || orderInfo.orderStatus == 11">
							<view>营业时间：{{ orderInfo.alsoStartTime + '-' + orderInfo.alsoEndTime }}</view>
							<view style="margin-top: 20rpx;">当前距门店：{{ orderInfo.distanceAlso }}km</view>
						</view>
						<view v-else>
							<view>营业时间：{{ orderInfo.takeStartTime + '-' + orderInfo.takeEndTime }}</view>
							<view style="margin-top: 20rpx;">当前距门店：{{ orderInfo.distanceTake }}km</view>
						</view>

						<view @click.stop="goCallPhone(1)">
							<image class="call" src="/pagesD/static/services_phone.png" mode="aspectFill"></image>
							<text style="margin-left:5rpx; color: #1989FA;">联系商家</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 租车必读 -->
			<view class="orderInfoBox">
				<view class="boxTitle">
					<text>租车必读</text>
					<text class="depositDetail" @click.stop="showMustRead = true">查看全部</text>
				</view>
				<!-- 取消规则 -->
				<view class="cancleRuleContent" v-if="orderInfo.ruleItemList && orderInfo.ruleItemList.length > 0">
					<view class="cancleTitle" style="margin-bottom: 20rpx;">取消规则</view>
					<view class="h-table">
						<view class="h-tr h-thead" style="background-color: #F7F9FA;">
							<view class="h-td" style="width: 300rpx;">取消时间</view>
							<view class="h-td h-td-colspan">扣费标准</view>
						</view>

						<view class="h-tr" v-for="(item, index) in orderInfo.ruleItemList" :key="item.id">
							<template v-if="item.backType == 1">
								<view class="h-td" style="width: 300rpx;">距离取车时间{{ item.ruleTime }}小时(含)以上</view>
								<view class="h-td h-td-colspan" style="background-color: #F2FCF7; color : #51C57F">免费取消
								</view>
							</template>
							<template v-if="item.backType == 3">
								<view class="h-td" style="width: 300rpx;">距离取车时间{{ item.ruleTime }}小时以内</view>
								<view class="h-td h-td-colspan">
									{{ item.ruleBase == 1 ? '订单总金额' : '首日租金' }}的{{ item.ruleValue }}% 作为违约金
								</view>
							</template>
							<template v-if="item.backType == 2">
								<view class="h-td" style="width: 300rpx;">过取车时间未取车</view>
								<view class="h-td h-td-colspan">
									收取{{ item.ruleBase == 1 ? '订单总金额' : '首日租金' }}的{{ item.ruleValue }}% 作为违约金
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="orderInfoBox">
				<view class="boxTitle">订单信息</view>
				<view class="orderBox">
					<view>订单号</view>
					<view>{{ orderInfo.orderNo }}</view>
				</view>
				<view class="orderBox">
					<view>下单时间</view>
					<view>{{ orderInfo.createTime }}</view>
				</view>
				<view class="orderBox">
					<view>车牌号</view>
					<view>{{ orderInfo.carNo||'--' }}</view>
				</view>
			</view>

			<!-- 租车合同 -->
			<view class="orderInfoBox" v-if="rentContractUrl">
				<view class="contractTitle">
					<text>租车合同</text>
					<text class="depositDetail" @click.stop="goOrderContract">查看</text>
				</view>
			</view>

			<!-- 发票信息 -->
			<view class="orderInfoBox" v-if="orderInfo.orderStatus === 9">
				<view class="boxTitle">发票信息</view>
				<view class="orderBox" style="font-size: 24rpx; color: #666;">
					联系门店进行开票或在我的-发票中选择该订单申请，申请后商家会第一时间处理并与您取得联系
				</view>
			</view>

			<!-- 其他信息 -->
			<view class="orderInfoBox" v-if="orderInfo.orderStatus === 4">
				<view class="boxTitle">其他信息</view>
				<view class="orderBox" style="display: block; font-size: 24rpx; color: #666;"
					@click.stop="showCancleAlert = true">
					如需续租/提前退车请与门店联系，提前退车请先阅读
					<text style="color: #1989FA;">提前退改规则</text>
				</view>
			</view>

			<!-- 取还单据 -->
			<view class="orderInfoBox"
				v-if="(orderInfo.orderStatus >= 4 && orderInfo.orderStatus <= 9) || orderInfo.orderStatus == 11"
				@click="goCheckCarInfo()">
				<view class="boxTitle">取还单据</view>
				<view class="checkCarBox">
					<view>
						<view>
							<text style="margin-right: 20rpx;">取车时间:</text>
							<text>{{ orderInfo.actualStartTime }}</text>
						</view>
						<view style="margin-top: 30rpx;">
							<text style="margin-right: 20rpx;">还车时间:</text>
							<text v-if="orderInfo.actualEndTime">{{ orderInfo.actualEndTime }}</text>
							<text v-else>未还车</text>
						</view>
					</view>

					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<!-- 待支付 -->
		<view class="btnBox" v-if="orderInfo.orderStatus === 0 && orderInfo.rentPayType == 1">
			<text class="btn" @click.stop="showCancleAlert = true">取消订单</text>
			<text class="btn" style="border: 1px solid #1989FA;color: #1989FA;" @click.stop="payOrder(item)">立即支付</text>
		</view>
		<!-- 已支付待取车 -->
		<view class="btnBox" v-else-if="orderInfo.orderStatus < 4"><text class="bigBtn"
				@click.stop="showCanlePopup">取消订单</text></view>

		<u-popup :show="showCancleAlert" closeable="true" @close="showCancleAlert = false">
			<view class="canleAlert">
				<view class="title">{{ orderInfo.orderStatus === 4 ? '提前退改规则' : '取消订单' }}</view>
				<view class="ruleTips">{{ liquidatedDamage.ruleText }}</view>
				<view class="ruleDetailBox">
					<text class="title">车辆租赁费退还</text>
					<view class="value">
						<text v-if="liquidatedDamage.rent != liquidatedDamage.residualRent"
							style="text-decoration: line-through;">
							¥{{ liquidatedDamage.rent }}
						</text>
						<text style="margin-left: 10rpx; color: #1989FA;">¥{{ liquidatedDamage.residualRent }}</text>
					</view>
				</view>
				<view class="otherTip">温馨提示：优惠券不做退还</view>
				<view class="bottomView" v-if="orderInfo.orderStatus < 4">
					<view>
						<text class="leftTitle">退还金额</text>
						<text class="price">{{ liquidatedDamage.residualRent }}</text>
					</view>
					<view class="cancleBtn" @click.stop="confirmCancle">确认取消</view>
				</view>
			</view>
		</u-popup>

		<must-read v-if="showMustRead" :showMustRead="showMustRead" :orderInfo="orderInfo"
			@close="showMustRead = false"></must-read>
		<u-modal :show="showProtectionHelper" :title="currentProtection.name" confirmText="知道了"
			@confirm="showProtectionHelper = false">
			<scroll-view scroll-y="true" style="max-height: 300rpx;">
				<view class="flex-colum-center">
					<view style="color: #666;font-size: 26rpx;">{{ currentProtection.remark }}</view>
				</view>
			</scroll-view>
		</u-modal>

		<!-- 价格日历 -->
		<u-modal :show="showPriceCalendar" title="价格日历" confirmText="知道了" @confirm="showPriceCalendar = false">
			<scroll-view scroll-y="true" style="max-height: 500rpx;">
				<u-grid :border="false">
					<u-grid-item v-for="(item, index) in orderInfo.orderPriceCalendars" :key="index">
						<view class="calendarItem flex-colum-center">
							<text>{{ item.sameDay }}</text>
							<text style="color: orange; font-size: 20rpx;">¥{{ item.price }}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	import {
		orderShortInfo,
		shortCancelOrder,
		shortRefundOrder,
		shortAgainPayOrder,
		liquidatedDamages
	} from '@/api/order-api.js';
	import mustRead from '@/components/mustRead/mustRead.vue';
	import settings from '@/settings.js'
	import {bd09ToGcj02} from '@/utils/utils.js'
	export default {
		components: {
			mustRead
		},
		data() {
			return {
				baseUrl: settings.baseImageUrl,
				orderNo: '',
				orderInfo: {
					orderInfoRent: {
						itemsVoList: []
					},
					orderInfoDeposit: {
						itemsVoList: []
					},
					orderInfoIllegal: {
						itemsVoList: []
					}
				},
				rentalType: '',
				orderStatus: '',
				showCancleAlert: false,
				type: 1,
				liquidatedDamage: {},
				showCancleBtn: false,
				downTime: 0,
				showOrderCost: false,
				showCarDeposit: true,
				showIllegalDeposit: true,
				showMustRead: false, //是否显示租车必读
				showProtectionHelper: false, //是否显示费用项说明
				currentProtection: {}, //当前费用项
				showPriceCalendar: false //价格日历
			};
		},
		computed: {
			rentContractUrl() {
				let rentContractUrl = null;
				if (this.orderInfo.contractSource) {
					const contractFileAddress = this.orderInfo.contractFileAddress;
					let containerStr = new RegExp("https");
					const isHttp = containerStr.test(contractFileAddress);
					if (isHttp) {
						rentContractUrl = contractFileAddress;
					} else {
						rentContractUrl = this.baseUrl + encodeURIComponent(this.orderInfo.contractFileAddress);
					}
				}
				return rentContractUrl;
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.type = op.type;
			this.getOrderDetail();
		},
		methods: {

			// 查看保障明细
			handleHelper(item) {
				this.currentProtection = item;
				this.showProtectionHelper = true;
			},
			showCanlePopup() {
				this.showCancleAlert = true;
			},
			getOrderDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				orderShortInfo({
					type: this.type,
					orderNo: this.orderNo,
					lat: this.$store.state.user.lat,
					lon: this.$store.state.user.lng
				}).then(res => {
					uni.hideLoading();
					this.orderInfo = res.data;
					if (this.orderInfo.orderInfoRent.itemsVoList && this.orderInfo.orderInfoRent.itemsVoList
						.length > 0) {
						this.orderInfo.orderInfoRent.itemsVoList = this.orderInfo.orderInfoRent.itemsVoList.map(
							item => {
								if (item.type == 3) {
									this.$set(item, 'isOpen', true);
								}

								return item;
							});
					}
					this.setCancleBtn();
					this.setPayTime();
					this.getLiquidatedDamages();
				});
			},
			clickItem(item) {
				if (item.type == 3) {
					item.isOpen = !item.isOpen;
					this.$forceUpdate();
				}
			},
			// 配置重新下单显示时机
			setCancleBtn() {
				if (this.orderInfo.orderStatus == 10) {
					//订单已取消
					//取消时间
					let cancleTime = this.orderInfo.updateTime;
					let placeOrder = this.$store.state.initData.initData.placeOrder * 60;
					var moment = require('@/utils/moment.js');
					let cancleDate = moment(cancleTime, 'YYYY-MM-DD HH:mm:ss');
					let currentDate = moment();
					// 计算当前时间和订单取消时间的时间差
					let offset = moment(currentDate).diff(moment(cancleDate), 'minute');
					console.log(offset);
					if (offset <= placeOrder) {
						//间隔时间在指定范围内显示重新下单
						this.showCancleBtn = true;
					}
				}
			},
			// 配置待支付剩余支付时间
			setPayTime() {
				if (this.orderInfo.orderStatus === 0 && this.orderInfo.rentPayType === 1 && this.orderInfo.orderSource ===
					1) {
					//订单创建时间
					let createTime = this.orderInfo.createTime;
					var moment = require('@/utils/moment.js');
					let orderDate = moment(createTime, 'YYYY-MM-DD HH:mm:ss');
					let currentDate = moment();
					let cancelTime = this.$store.state.initData.initData.cancelTime * 60;
					let offset = moment(currentDate).diff(moment(orderDate), 'seconds');
					if (offset < cancelTime) {
						this.downTime = cancelTime - offset;
					}
				}
			},
			// 倒计时结束
			countDownFinish() {
				uni.navigateBack({});
				uni.$emit('refreshOrder');
			},

			// 获取取消退改规则
			getLiquidatedDamages() {
				liquidatedDamages(this.orderNo).then(res => {
					this.liquidatedDamage = res.data;
				});
			},
			// 导航
			goNaviRoute(type) {
				let lat;
				let lng;
				let name;
				if (type == 1) {
					let result = bd09ToGcj02(this.orderInfo.takeLat, this.orderInfo.takeLon)
					lat = result[0];
					lng = result[1];
					// lat = this.orderInfo.takeLat;
					// lng = this.orderInfo.takeLon;
					name = this.orderInfo.takeStoreName;
				} else {
					let result = bd09ToGcj02(this.orderInfo.alsoLat, this.orderInfo.alsoLon)
					lat = result[0];
					lng = result[1];
					// lat = this.orderInfo.alsoLat;
					// lng = this.orderInfo.alsoLon;
					name = this.orderInfo.alsoStoreName;
				}

				uni.openLocation({
					//​使用微信内置地图查看位置。
					latitude: lat, //要去的纬度-地址
					longitude: lng, //要去的经度-地址
					name: name,
					success() {
						console.log('成功了');
					},
					fail(msg) {
						console.log(msg);
					}
				});
			},
			//拨打电话
			goCallPhone(type) {
				// const phone = type == 1 ? this.orderInfo.takePhone : this.orderInfo.alsoPhone;
				const phone = this.$store.state.initData.initData.consumerHotline;
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone,
						success: res => {
							console.log('拨打电话成功');
						}
					});
				} else {
					this.$u.toast('手机号为空,无法拨打');
				}
			},
			//取消订单
			confirmCancle() {
				if (this.orderInfo.orderStatus == 0) {
					//未支付取消接口
					shortCancelOrder(this.orderNo).then(res => {
						if (res.code == 200) {
							this.showCancleAlert = false;
							uni.showToast({
								title: '您已成功取消当前订单，如有疑问请联系门店',
								icon: 'success'
							});
							uni.navigateBack({});
							uni.$emit('refreshOrder');
						}
					});
				} else {
					//已支付退款接口
					shortRefundOrder(this.orderNo).then(res => {
						if (res.code == 200) {
							this.showCancleAlert = false;
							uni.showToast({
								title: '您已成功取消当前订单，退款将会在1个工作日内退回，如有疑问请联系门店',
								icon: 'success'
							});
							uni.navigateBack({});
							uni.$emit('refreshOrder');
						}
					});
				}
			},

			//订单支付
			payOrder() {
				uni.showLoading();
				shortAgainPayOrder({
					tenantId: this.$store.state.user.tenantId,
					orderNo: this.orderNo,
					amount: this.orderInfo.amount
				}).then(res => {
					uni.hideLoading();
					//唤起微信支付
					let data = JSON.parse(res.data.json);
					let amount = res.data.amount;
					let orderNo = res.data.orderNo;
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							uni.$u.toast('支付成功');
							uni.$emit('refreshOrder');
							uni.redirectTo({
								url: '/pagesB/activity/activity-paySuccess?orderNo=' +
									orderNo + '&totalPrice=' + amount + '&backViewType=3'
							});
						},
						fail: function(err) {
							uni.showToast({
								title: '订单支付失败'
							});
						}
					});
				});
			},

			//押金退款
			goDepositRefund() {
				uni.navigateTo({
					url: './deposit-refund?orderNo=' + this.orderNo + '&type=' + this.type
				});
			},
			//取还单据
			goCheckCarInfo() {
				uni.navigateTo({
					url: './checkCar-detail?orderNo=' + this.orderNo + '&type=' + this.type
				});
			},
			//重新下单
			goAginOrder() {
				uni.switchTab({
					url: '/pages/home/home'
				});
			},
			// 查看合同
			goOrderContract() {
				const webUrl = this.rentContractUrl;
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform === 'android') {
							uni.showLoading({
								title: '加载中...'
							})
							wx.downloadFile({
								url: webUrl,
								success: function(res1) {
									uni.hideLoading();
									console.log('下载成功');
									const filePath = res1.tempFilePath;
									wx.openDocument({
										filePath: filePath,
										success: (res2) => {
											console.log('打开文档成功');
										},
										fail: (error) => {
											console.log(error);
										}
									})
								},
								fail: function(error) {
									uni.hideLoading();
									console.log('下载失败', error);
								}
							})
						} else {
							uni.navigateTo({
								url: './previewContract?webUrl=' + webUrl
							})
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/style/helang-table.scss';

	.safeBottom {
		padding-bottom: 130rpx;
	}

	.bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 831rpx;
		background: linear-gradient(0deg, #f2f3f5 0%, #3b86f9 100%);
		z-index: -1;
	}

	// 顶部状态及提醒
	.orderRemindBox {
		margin: 50rpx 24rpx 20rpx;
		color: #fff;

		.orderStatusWrapper {
			font-size: 44rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.re-order {
			margin-top: 30rpx;
			line-height: 80rpx;
			text-align: center;
			color: #2185fd;
			font-size: 32rpx;
			font-weight: bold;
			background-color: #e7f3ff;
			border-radius: 18rpx;
		}
	}

	// 费用明细
	.costInfoBox {
		margin-top: 20rpx;
		background: #ffffff;
		box-shadow: 0 4rpx 16rpx 0 rgba(1, 10, 18, 0.16);
		border-radius: 10rpx;
		padding: 0 24rpx;

		.costTitle {
			height: 104rpx;
			// border-bottom: 1rpx solid #f5f5f5;
			color: #393939;
			font-size: 28rpx;
			font-weight: bold;
			// margin-bottom: 12rpx;
		}

		.costList {
			margin-top: 12rpx;
			border-top: 1rpx solid #f5f5f5;
			padding: 12rpx 0;

			.costItem {
				font-size: 28rpx;
				color: #393939;
				padding: 12rpx 0;

				.chargeProjectName {
					margin-right: 6rpx;
					max-width: 350rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.costSubList {
			border-radius: 8rpx;
			border: 2rpx solid #dddddd;
			padding: 12rpx 24rpx;
			margin-top: 24rpx;

			.costSubItem {
				font-size: 28rpx;
				color: #393939;
				padding: 10rpx 0;
			}
		}

		.depositTipRed {
			font-size: 24rpx;
			color: #ff2020;
			margin-top: 24rpx;
		}
	}

	.costTipBox {
		font-size: 24rpx;
		color: #7b7a86;
		margin: 24rpx 0;

		.valueInfo {
			margin: 20rpx 0;
			padding: 24rpx 34rpx;
			background-color: #f7f8fa;
		}
	}

	.depositTip {
		margin-top: 30rpx;
		padding: 24rpx 34rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #7b7a86;
		background-color: #f7f8fa;
	}

	.orderAmount {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 100rpx;
		border-bottom: 1px solid #fafafa;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #393939;
		}

		.valueBox {
			font-size: 28rpx;
			color: #333333;
		}
	}

	// 车型门店相关信息
	.carStoreInfo {
		margin: 0 22rpx 20rpx;
		padding: 30rpx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.carBox {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.carInfo {
				.carModel {
					max-width: 400rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
					// white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
				}

				.carConfig {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #575c5e;
				}
			}

			.carImg {
				width: 210rpx;
				height: 110rpx;
			}
		}

		.storeBox {
			//margin-top: 30rpx;
			position: relative;

			.takeReturnCarInfo {

				.takeWay {
					margin-bottom: 20rpx;
					font-size: 28rpx;

					.wayTitle {
						color: #666666;
					}

					.wayValue {
						margin-left: 32rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}
				}


				.mark1 {
					box-sizing: border-box;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					background-color: #F0F8FF;
					color: #1989FA;
					border-radius: 22rpx;
					border: 1rpx solid #1989FA;
					font-size: 22rpx;
				}

				.mark2 {
					box-sizing: border-box;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					background-color: #FFF6EF;
					color: #FF892C;
					border-radius: 22rpx;
					border: 1rpx solid #FF892C;
					font-size: 22rpx;
				}

				.value {
					margin-left: 44rpx;
					font-size: 28rpx;
					color: #333333;
				}

				.addressBox {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					color: #3B86F6;
					margin-left: 20rpx;

					.value {
						font-size: 26rpx;
						color: #666666;
						max-width: 380rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.navi {
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				}
			}

			.dashedLine {
				position: absolute;
				top: 100rpx;
				left: 20rpx;
			}

			.storeInfo {
				margin-top: 30rpx;
				padding-top: 40rpx;
				border-top: 1px solid #fafafa;
				font-size: 24rpx;
				color: #666666;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.call {
					width: 24rpx;
					height: 24rpx;
					position: relative;
					top: 3rpx;
				}
			}
		}
	}

	.orderBox {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #393939;
		margin-top: 30rpx;
	}

	.checkCarBox {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #393939;
	}

	// 公共盒子
	.orderInfoBox {
		margin: 0 20rpx 20rpx;
		padding: 30rpx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.boxTitle {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #fafafa;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.depositDetail {
				font-size: 26rpx;
				color: #1989fa;
			}
		}

		.contractTitle {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.depositDetail {
				font-size: 26rpx;
				color: #1989fa;
			}
		}
	}

	.btnBox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;

		.btn {
			width: 45%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 1px solid #666666;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.bigBtn {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 1px solid #666666;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.canleAlert {
		padding: 40rpx 34rpx 0;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
		}

		.ruleTips {
			margin-top: 50rpx;
			font-size: 26rpx;
			color: #666666;
		}

		.ruleDetailBox {
			display: flex;
			align-items: center;
			margin: 28rpx 10rpx;
			border: 1px solid #adb8bf;
			height: 90rpx;
			box-sizing: border-box;

			.title {
				width: 320rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				border-right: 1px solid #adb8bf;
			}

			.value {
				width: 350rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
			}
		}

		.otherTip {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 20rpx;
		}

		.bottomView {
			height: 150rpx;
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.leftTitle {
				font-size: 28rpx;
				color: #999999;
			}

			.price {
				margin-left: 12rpx;
				font-size: 36rpx;
				color: #ec4863;

				&::before {
					content: '¥';
					font-size: 26rpx;
				}
			}

			.cancleBtn {
				width: 300rpx;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				background: #1989fa;
				border-radius: 24rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #ffffff;
			}
		}
	}

	//租车必读(取消规则)
	.cancleRuleContent {
		padding-top: 20rpx;
		font-size: 24rpx;

		.cancleTitle {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.calendarItem {
		color: #333;
		font-size: 22rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(1, 10, 18, 0.16);
		border-radius: 10rpx;
		padding: 16rpx;
		margin: 5rpx;
	}
</style>